<template>
  <div class="myCollection">

    <h2 class="top">我的收藏</h2>

    <div class="layout">
      <ul class="shop-ul" style="overflow: hidden;">
        <CollectionItem v-for="(item,index) in loveList" :key="index" :love-info="item"></CollectionItem>
      </ul>
      <div class="block" style="float: right;">

        <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="collectionQuery.pageNum"
            :page-size="collectionQuery.pageSize"
            layout="prev, pager, next, jumper"
            :total="total">
        </el-pagination>
<!--        <el-pagination-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--            :current-page.sync="collectionQuery.pageNum"-->
<!--            :page-size="collectionQuery.pageSize"-->
<!--            layout="total, prev, pager, next, jumper"-->
<!--            :total="total">-->
<!--        </el-pagination>-->
      </div>
    </div>

  </div>
</template>

<script>
import CollectionItem from "@/views/home/personInfo/collection/CollectionItem";
export default {
  name: "MyCollection",
  components: {CollectionItem},
  data(){
    return{
      total:null,
      collectionQuery:{
        bid:null,
        pageNum:1,
        pageSize:4
      },
      loveList:[]
    }
  },
  methods:{
    goBack() {
      console.log('go back');
    },
    handleSizeChange(val){
      this.collectionQuery.pageSize = val * 1
      this.$router.push({path:'/personCenter/myCollection',query: this.collectionQuery})
    },
    handleCurrentChange(val){
      this.collectionQuery.pageNum = val * 1
      this.$router.push({path:'/personCenter/myCollection',query: this.collectionQuery})
    }
  },
  created() {
    this.collectionQuery = {...this.collectionQuery, ...this.$route.query}
    this.getRequest('/cms/bookFavority/list',this.collectionQuery).then((resp)=>{
      console.log(resp)
      this.loveList = resp.data.list
      this.total = resp.data.total
    })
  }
}
</script>

<style scoped>
.myCollection{
  width: 55em;
  height: 620px;
  /*border:solid 1px lightgray;*/
  position: relative;
  left: 20.3em;
}
.shop-ul{
  width: 60em;
}
.myCollection .top{
  text-align: center;
  margin: 1em 1em;
}
.layout {
  width: 926px;
  margin: 0 auto;
  height: 528px;
  /*border: solid;*/
}
</style>